<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改个人信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />
    <!--    头像文件上传样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        body{
            position: relative;
        }
        .app{
            margin-top: 110px;
            margin-left: 350px;


        }
    </style>
</head>

<body>
<!--<h1>hello 11</h1>-->
<div class="app" id="app">
    <!--    <el-page-header @back="goBack" content="详情页面"> -->
    <!--    </el-page-header>-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item style="width: 50%;" label="账号：" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>

        <el-form-item style="width: 50%" label="员工姓名：" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item style="width: 50%" label="手机号：" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>

        <el-form-item style="width: 50%" label="性别：" prop="sex">
            <el-radio-group  v-model="sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item style="width: 50%" label="省份证号：" prop="idNumber">
            <el-input v-model="ruleForm.idNumber"></el-input>
        </el-form-item>


        <el-upload class="avatar-uploader"
                   action="/photos/upload"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeUpload"
                   ref="upload"
                   style="width: 250px;height: 250px;margin: 0px 0 0 100px">
            <img v-if="imageUrl"  :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
        </el-form-item>
    </el-form>
</div>



<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>


<script>

    new Vue({
        el: '#app',
        data:{

            purchaseInfo:'',
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            imageUrl:'',
            sex:'1',
            rules: {
                username: [
                    { required: true, message: '请输入username', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入name', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入phone', trigger: 'blur' },
                    { min: 8, max: 11, message: '长度在 8 到 11 个字符', trigger: 'blur' }
                ],
                idNumber: [
                    { required: true, message: '请输入id_number', trigger: 'blur' },
                    { min: 18, max: 18, message: '请输入18位的身份证号', trigger: 'blur' }
                ],

            }
        },
        created() {
            const purchaseInfo = window.localStorage.getItem('purchaseInfo')
            console.log("purchaseInfo1:::"+purchaseInfo)
            if (purchaseInfo) {
                this.purchaseInfo = JSON.parse(purchaseInfo)
            }
            console.log("purchaseInfo2:::"+purchaseInfo)
            this.ruleForm=this.purchaseInfo.data
            this.imageUrl = `/photos/download?name=${this.purchaseInfo.data.image}`


        },

        methods: {

            //确定修改
            submitForm(){
                if (this.sex=="1"){
                    this.ruleForm.sex="男"
                }else {
                    this.ruleForm.sex="女"
                }
                this.$refs.ruleForm.validate((valid)=>{
                    if (valid){
                        axios.put("/purchases",this.ruleForm).then((res)=>{
                            if (res.data.code){
                                this.$message.success("修改个人信息成功")
                                //修改localStorage的值
                                localStorage.setItem('purchaseInfo',JSON.stringify(res.data))
                            }else{
                                this.$message.error("修改个人信息失败")
                            }
                        }).finally(()=>{
                            //刷新父页面
                            parent.window.location.reload();

                            // this.display();
                        })
                    }
                })

            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                console.log("response:")
                console.log(response)
                this.ruleForm.image=response.data

                this.imageUrl = `/photos/download?name=${response.data}`
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
        }
    })
</script>
</body>
</html>
